<!DOCTYPE html>
<html>

<head>
    <title>task33</title>
    <meta charset="utf-8">
    <style type="text/css">
    form {
        text-align: center;
        margin: 20px 0 0 0;
    }
    
    td {
        width: 30px;
        height: 30px;
        border: 1px solid gray;
    }
    
    table {
        border-collapse: collapse;
        margin: 0 auto;
    }
    
    table tr:first-child td,
    table tr td:first-child {
        border: none;
        text-align: right;
        vertical-align: bottom;
    }
    
    span {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-color: red;
        position: relative;
        transition: transform 800ms;
        /*transform: rotate(100deg);*/
    }
    
    span div {
        display: inline-block;
        width: 30px;
        height: 10px;
        background-color: blue;
        position: absolute;
        top: 0;
    }
    </style>
</head>

<body>
    <div id="game"></div>
    <form>
        <input type="button" value="GO" id="btnGo"></input>
        <input type="button" value="TUN LEF" id="btnLeft"></input>
        <input type="button" value="TUN RIG" id="btnRight"></input>
        <input type="button" value="TUN BAC" id="btnBack"></input>
    </form>
    <script type="text/javascript">
    var divGame = document.getElementById('game'),
        btnGo = document.getElementById('btnGo'),
        btnLeft = document.getElementById('btnLeft'),
        btnRight = document.getElementById('btnRight'),
        btnBack = document.getElementById('btnBack');

    btnGo.addEventListener('click', function(e) {
        game.moveDia();
    })

    btnLeft.addEventListener('click', getFnRotate(-90));
    btnRight.addEventListener('click', getFnRotate(90));
    btnBack.addEventListener('click', getFnRotate(180));

    function getFnRotate(num) {
        return function() {
            game.rotateDia(num);
        }
    }

    var Game = function(rowMax, colMax) {
        this.rowMax = rowMax;
        this.colMax = colMax;
        this.table = null;
        this.dia = {
            deg: 0,
            ele: null,
            pos: null
        };
    }

    Game.prototype = {
        render: function(container) {
            var rowRandom = Math.ceil(Math.random() * this.rowMax);
            var colRandom = Math.ceil(Math.random() * this.colMax);

            var table = document.createElement('table');
            this.table = table;
            for (var i = 0; i < this.rowMax + 1; i++) {
                var tr = document.createElement('tr');
                for (var j = 0; j < this.colMax + 1; j++) {
                    var td = document.createElement('td');
                    if (i === 0 && j === 0) {} else {
                        if (i === 0) {
                            td.innerHTML = j;
                        }
                        if (j === 0) {
                            td.innerHTML = i;
                        }
                    }

                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }

            container.innerHTML = '';
            container.appendChild(table);

            this.createDiaAt(rowRandom, colRandom);
        },

        createDiaAt: function(row, col) {
            this.dia.deg = 0;
            this.dia.pos = [row, col];
            this.renderDia();
        },

        renderDia: function() {
            var row = this.dia.pos[0],
                col = this.dia.pos[1];
            this.dia.ele = document.createElement('span');
            this.dia.ele.innerHTML = '<div></div>';
            this.dia.ele.style.transform = 'rotate(' + this.dia.deg + 'deg)';
            this.table.children[row].children[col].appendChild(this.dia.ele);
        },

        rotateDia: function(degOffset) {
            this.dia.deg += degOffset;
            this.dia.ele.style.transform = 'rotate(' + this.dia.deg + 'deg)';
        },

        moveDia: function() {
            var num = this.dia.deg % 360;
            num = num < 0 ? num + 360 : num;
            if (num === 0) {
                if (this.dia.pos[0] > 1) {
                    this.dia.pos[0]--;
                }
            } else if (num === 90) {
                if (this.dia.pos[1] < this.colMax) {
                    this.dia.pos[1]++;
                }
            } else if (num === 180) {
                if (this.dia.pos[0] < this.rowMax) {
                    this.dia.pos[0]++;
                }
            } else if (num === 270) {
                if (this.dia.pos[1] > 1) {
                    this.dia.pos[1]--;
                }
            }

            var row = this.dia.pos[0],
                col = this.dia.pos[1],
                ele = this.dia.ele;
            ele.parentElement.removeChild(ele);
            this.table.children[row].children[col].appendChild(ele);
        }
    };

    var game = new Game(10, 10);
    game.render(divGame);
    </script>
</body>

</html>
